<!--
// +----------------------------------------------------------------------
// | Created by PHPstorm: JRKAdmin框架 [ JRKAdmin ]
// +----------------------------------------------------------------------
// | Copyright (c) 2019~2022 [LuckyHHY] All rights reserved.
// +----------------------------------------------------------------------
// | SiteUrl: http://www.luckyhhy.cn
// +----------------------------------------------------------------------
// | Author: LuckyHhy <jackhhy520@qq.com>
// +----------------------------------------------------------------------
// | Date: 2020/3/3-11:22
// +----------------------------------------------------------------------
// | Description:
// +----------------------------------------------------------------------
*-->
<!DOCTYPE html>
<html lang="en" >
<head >
    <meta charset="UTF-8" >
    <title >ces</title >
    <!--引入css-->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">

    <!--引入JavaScript-->
    <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>


</head >
<body >


<!--基于服务端-->


<table id="table_id_example" class="table table-border table-bordered table-bg table-hover table-sort table-responsive" width="99%" style="padding-left: 7px; ">
    <thead>
    <tr>
        <th width="20%">序号</th>
        <th width="50%">名称</th>
        <th width="30%">地址</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script>
    $(document).ready(function() {
        $("#table_id_example").dataTable({
            "lengthMenu": [
                [4,8,10,15,20],    // 具体的数量
                [4,8,10,15, 20] // 文字描述
            ],
            "paging": true,    // 是否开启分页功能(默认开启)
            'info': true,      // 是否显示分页的统计信息(默认开启)
            "searching":true,  // 是否开启搜索功能(默认开启)
            "ordering": true,  // 是否开启排序功能(默认开启)
            "order":[ [0,'asc'] ], // 设置默认排序的表格列[参数1是表格列的下标，从0开始]
            "stateSave": true,      // 是否保存当前datatables的状态(刷新后当前保持状态)
            "processing": true,     // 显示处理中的字样[数量多的时候提示用户在处理中](默认开启)
            "serverSide": true,    // 是否开启服务器模式.
            scrollY:        "300px",
            scrollX:        true,
            scrollCollapse: true,
            fixedColumns:   {
                leftColumns: 2
            },
            // false时，会一次性查询所有的数据，dataTables帮我们完成分页等。
            // true时，点击分页页码就会每次都到后台提取数据。
            "language": //把文字变为中文
                {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "显示 _MENU_ 项结果",
                    "sZeroRecords": "没有匹配结果",
                    "sInfo": "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索:",
                    "sUrl": "",
                    "sEmptyTable": "表中数据为空",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    },
                    "oAria": {
                        "sSortAscending": ": 以升序排列此列",
                        "sSortDescending": ": 以降序排列此列"
                    }
                },
            // 使用ajax到后台服务获取数据
            "ajax": {
                "url": "{:url('admin/test')}", //请求数据的后台地址
                "type": "POST",     // ajax的请求方法

            },
            //需要接收返回的数据
            //总的数量与表格的列数必须一致，不能多也不能少，一个变量代表一个td
            //如果data接收服务器没有返回该字段信息，那么该字段一定要同时设置defaultContent属性
            //例{'data':'a',"defaultContent":""},
            "columns": [
                {"data": "id"},
                {"data": "title"},
                {"data": 'href'},
            ],
        });

    });
</script>

</body >
</html >